<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import request from '@/utils/request.js';

const route = useRoute();
const student_id = route.query.studentId;
// 接收传递的匹配总分
const partnerTotalScore = route.query.partnerTotalScore;

// 初始化用户信息（确保数组字段默认是空数组，避免length报错）
const userInfo = ref({
  nickname: '', // 对应姓名
  avatar: '',
  major: '',
  grade: 0, // 原始年级数字
  student_id: '',
  study_time: '', // 学习时间
  study_style: '', // 学习风格
  communication_frequency: '',
  selected_course_names: [], // 课程列表
  // 补充默认值避免渲染错误
  intro: '该用户未填写个人简介' // 真实数据没有intro，用默认值
});

// 年级数字转文字（1→大一，2→大二，以此类推）
const getGradeText = (gradeNum) => {
  const gradeMap = { 1: '大一', 2: '大二', 3: '大三', 4: '大四' };
  return gradeMap[gradeNum] || '未知年级';
};

const getUserCompleteInfo = async () => {
  try {
    const res = await request.get('/getUserCompleteInfo', {
      params: { student_id }
    });
    // 覆盖用户信息（使用真实返回的字段）
    userInfo.value = { ...userInfo.value, ...res.data };
  } catch (error) {
    console.error('获取用户信息失败', error);
  }
};

onMounted(() => {
  getUserCompleteInfo();
});
</script>

<template>
  <div class="page-container">
    <div class="personal-detail">
      <!-- 左侧信息区域 -->
      <div class="left-section">
        <div class="user-card">
          <!-- 头像：如果接口返回的头像没有尺寸，补充尺寸参数 -->
          <img
            :src="userInfo.avatar"
            alt="用户头像"
            class="avatar"
          />
          <div class="user-basic">
            <!-- 姓名使用nickname字段 -->
            <h2 class="name">{{ userInfo.nickname }}</h2>
            <p class="major">专业 {{ userInfo.major }}</p>
            <!-- 年级数字转文字 -->
            <p class="grade">年级 {{ getGradeText(userInfo.grade) }}</p>
            <p class="student-id">脱敏学号: {{ userInfo.student_id }}</p>
          </div>
        </div>

        <div class="intro">
          <h3 class="intro-title">
            <img src="https://picsum.photos/id/237/24/24" alt="简介图标" class="section-icon" />
            个人简介
          </h3>
          <p class="intro-content">{{ userInfo.intro }}</p>
        </div>

        <div class="learning-preference">
          <h3 class="preference-title">
            <img src="https://picsum.photos/id/238/24/24" alt="偏好图标" class="section-icon" />
            学习偏好
          </h3>
          <!-- 学习时间使用study_time字段 -->
          <div class="preference-time">
            <span>{{ userInfo.study_time }}</span>
          </div>
          <!-- 学习风格使用study_style字段 -->
          <div class="preference-type">
            <span>{{ userInfo.study_style }}</span>
          </div>
        </div>
      </div>

      <!-- 右侧信息区域 -->
      <div class="right-section">
        <div class="common-courses">
          <h3 class="courses-title">
            <img src="https://picsum.photos/id/239/24/24" alt="课程图标" class="section-icon" />
            所选课程
          </h3>
          <div class="courses-tags">
            <!-- 课程列表使用selected_course_names字段（原commonCourses不存在） -->
            <span v-for="course in userInfo.selected_course_names" :key="course" class="course-tag">
              {{ course }}
            </span>
            <!-- 用可选链?.避免数组未定义时的length报错 -->
            <span class="course-count">{{ userInfo.selected_course_names.length }}门</span>
          </div>
        </div>

        <div class="matching-degree">
          <h3 class="degree-title">
            <img src="https://picsum.photos/id/240/24/24" alt="匹配度图标" class="section-icon" />
            学习匹配度
          </h3>
          <div class="degree-score">
            <!-- 匹配总分使用路由传递的partnerTotalScore -->
            <span class="score">{{ partnerTotalScore }}分</span>
            <div class="progress-bar">
              <div class="progress" :style="{ width: `${partnerTotalScore}%` }"></div>
            </div>
          </div>
        </div>

        <div class="communication">
          <h3 class="comm-title">
            <img src="https://picsum.photos/id/243/24/24" alt="沟通图标" class="section-icon" />
            沟通频率
          </h3>
          <p class="comm-frequency">{{ userInfo.communication_frequency }}</p>
        </div>
      </div>
    </div>
  </div>
</template>


<style scoped>
/* PC端页面容器：全屏宽度，合理边距 */
.page-container {
  width: 100%;
  background-color: #f5f5f5;
  padding: 40px 0; /* 增加上下间距，提升呼吸感 */
  min-height: 100vh; /* 适应全屏高度 */
  box-sizing: border-box;
  color: #F0F9F4;
}

/* 主内容区：PC端宽屏适配 */
.personal-detail {
  display: flex;
  gap: 30px;
  width: 85%; /* 占据屏幕大部分宽度 */
  max-width: 1400px; /* 限制最大宽度，避免超宽显示 */
  margin: 0 auto; /* 居中 */
  height: auto;
}

/* 左侧区域：PC端比例调整，更宽更高 */
.left-section {
  flex: 3; /* 左侧占比3 */
  display: flex;
  flex-direction: column;
  gap: 25px; /* 增大模块间距 */
}

/* 用户卡片：PC端放大，突出重要信息 */
.user-card {
  background: linear-gradient(135deg, #00b36b 0%, #008a51 100%);
  color: #fff;
  padding: 35px; /* 增加内边距 */
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 30px; /* 增大内容间距 */
  min-height: 300px; /* 固定最小高度，确保PC端饱满 */
}

.avatar {
  width: 160px; /* 更大的头像 */
  height: 160px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* 增加阴影，提升立体感 */
}

.user-basic .name {
  font-size: 42px; /* 放大姓名 */
  margin: 0 0 20px 0;
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.user-basic .major,
.user-basic .grade,
.user-basic .student-id {
  font-size: 20px; /* 放大基础信息 */
  margin: 10px 0;
  opacity: 0.95;
}

/* 左侧模块通用样式：PC端放大 */
.intro, .learning-preference {
  background-color: #f0fdf4;
  border: 1px solid #dcfce7;
  border-radius: 10px;
  padding: 25px; /* 增加内边距 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* 轻微阴影，区分模块 */
}

/* 标题图标：放大 */
.section-icon {
  width: 24px;
  height: 24px;
  margin-right: 10px;
  vertical-align: middle;
}

/* 模块标题：放大 */
.intro-title, .preference-title,
.courses-title, .degree-title, .comm-title {
  color: #065f46;
  font-size: 24px; /* 标题放大 */
  margin: 0 0 18px 0;
  display: flex;
  align-items: center;
  font-weight: 600;
}

/* 个人简介内容：放大字体，增加行高 */
.intro-content {
  color: #166534;
  line-height: 1.8; /* 行高更舒适 */
  font-size: 18px; /* 内容字体放大 */
  letter-spacing: 0.3px; /* 增加字间距，提升可读性 */
}

/* 学习偏好标签：放大 */
.preference-time, .preference-type {
  display: flex;
  flex-wrap: wrap;
  gap: 15px; /* 标签间距增大 */
  margin-top: 15px;
}

.preference-time span, .preference-type span {
  background-color: #dcfce7;
  color: #065f46;
  padding: 10px 20px; /* 标签放大 */
  border-radius: 24px;
  font-size: 16px; /* 标签文字放大 */
  font-weight: 500;
}

/* 右侧区域：PC端比例调整 */
.right-section {
  flex: 4; /* 右侧占比4 */
  display: flex;
  flex-direction: column;
  gap: 25px; /* 模块间距增大 */
}

/* 共同课程模块：放大 */
.common-courses {
  background: linear-gradient(135deg, #00b36b 0%, #008a51 100%);
  color: #fff;
  padding: 25px; /* 内边距增加 */
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 课程标签：放大 */
.courses-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 15px; /* 标签间距 */
  margin-top: 15px;
}

.course-tag {
  background-color: rgba(255, 255, 255, 0.9);
  color: #065f46;
  padding: 10px 20px; /* 标签放大 */
  border-radius: 24px;
  font-size: 16px; /* 文字放大 */
  font-weight: 500;
  transition: all 0.2s;
}

.course-tag:hover {
  transform: translateY(-2px); /* hover效果，PC端交互优化 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.course-count {
  background-color: rgba(0, 0, 0, 0.1);
  color: #fff;
  padding: 10px 20px;
  border-radius: 24px;
  font-size: 16px;
}

/* 匹配度模块：放大 */
.matching-degree, .communication {
  background-color: #f0fdf4;
  border: 1px solid #dcfce7;
  border-radius: 10px;
  padding: 25px; /* 内边距增加 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  height: 100%;
}

/* 匹配度分数：显著放大 */
.degree-score {
  display: flex;
  align-items: center;
  margin: 25px 0; /* 增加上下间距 */
}

.score {
  font-size: 72px; /* 分数放大，突出显示 */
  font-weight: bold;
  color: #059669;
  margin-right: 30px; /* 与进度条间距增大 */
  text-shadow: 0 2px 4px rgba(0, 179, 107, 0.2);
}

/* 进度条：放大 */
.progress-bar {
  flex: 1;
  height: 16px; /* 进度条高度增加 */
  background-color: #dcfce7;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.progress {
  height: 100%;
  background-color: #059669;
  transition: width 0.8s ease;
}

/* 匹配度详情：放大 */
.degree-details {
  display: flex;
  flex-wrap: wrap;
  gap: 25px; /* 详情项间距增大 */
  margin-top: 15px;
  color: #065f46;
  font-size: 17px; /* 文字放大 */
}

/* 沟通频率：放大 */
.comm-frequency {
  color: #059669;
  font-size: 26px; /* 文字放大 */
  font-weight: bold;
  margin-top: 15px;
  padding: 12px 0;
  letter-spacing: 0.5px;
}
</style>
